<!--  -->
<template>
  <div>
      <div class="gonglue">
          <div class="gong_right">
            <swiper :options="swiperOption" ref="mySwiper" class="swiper">
			<!-- 这部分放你要渲染的那些内容 -->
			<swiper-slide v-for="(item, index) in news" :key="index">
                <span class="swiper_s1">{{item.title}}</span>
                <span class="swiper_s1">{{item.title}}</span>
			</swiper-slide>
	        </swiper>
          </div>
      </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
    props:[
        "news"
    ],
  data () {
    return {
        swiperOption: {
        direction: "vertical",
        loop: true,
        autoplay:true,
        pagination: {
        //   el: ".swiper-pagination",
          
        }
      }
    };
  },
}

</script>
<style scoped lang="scss">
.gonglue{
    width: 100%;
    height: 1.33333rem;
    background: url();
    background-size: cover;
    overflow: hidden;
    .gong_right{
        margin-left: 1.8666666rem;
    }
}
.swiper_s1{
    font-size: 12px;
    color: #333;
    background: url();
    background-repeat:no-repeat; 
    padding-left: 16px;
    height: 15px;
    margin-top: 8px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.swiper-slide{
    display: flex;
    flex-direction: column;
}
</style>